<template>
  <div class="treeStyle">
    <el-input
      prefix-icon="el-icon-search"
      :placeholder="$t('common.treeFilter')"
      v-model="filterText"
      style="margin-bottom: 20px"
      clearable
    >
    </el-input>
    <el-tree
      ref="tree"
      node-key="id"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :highlight-current="true"
      default-expand-all
      :data="options"
      @node-click="handleNodeClick"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
      :render-content="renderContent"
    >
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <!-- {{node}} -->
        <div>{{ node.label }}</div>
        <div class="btn">
          <slot name="btn" :scope="{ node, data }"></slot>
        </div>
      </div>
    </el-tree>
  </div>
</template>
<script lang="jsx">
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'OrgTree',
    props: {
      defaultProps: {
        type: Object,
        default: () => {
          return {
            children: 'children',
            label: 'label'
          }
        }
      },
      options: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        filterText: '',
        isExpanded: false,
        currentNode: {}
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      options(val) {}
    },
    mounted() {
      // this.getTree()
    },
    methods: {
      // getTree() {
      //   apiOrgTree().then(res=>{
      //     if(res.code===EnumApiCode.Success){
      //       this.tableData=res.data
      //     }
      //   })
      // },
      filterNode(value, data) {
        if (!value) return true
        return data[this.defaultProps.label].indexOf(value) !== -1
      },
      // 选中当前层级
      handleNodeClick(data, node) {
        const result = { ...data }
        if (node.parent.data.id) {
          result.parentName = node.parent.data[this.defaultProps.label]
        }
        this.$emit('handleNodeClick', result)
      },
      nodeExpand() {
        this.isExpanded = true
      },
      nodeCollapse() {
        const reult = this.$refs.tree.store.root.expanded
        this.isExpanded = reult || this.isExpanded
      },
      handleExpand() {
        this.isExpanded = !this.isExpanded
        this.handleExpandNodes(this.$refs.tree.store.root)
      },
      // 遍历树形数据，设置每一项的expanded属性，实现展开收起
      handleExpandNodes(node) {
        node.expanded = this.isExpanded
        for (const ele of node.childNodes) {
          ele.expanded = this.isExpanded
          if (ele.childNodes.length > 0) {
            this.handleExpandNodes(ele)
          }
        }
      },
      setNodeChecked(keys) {
        if (keys?.length) {
          this.$refs.tree.setCheckedKeys(keys)
        }
      },
      getCurrentNode() {
        const result = this.$refs.tree.getCurrentNode()
        return result
      },
      renderContent(h, { node, data, store }) {
        let nodeClass = ''
        if (data.state === 0) {
          nodeClass = 'gray'
        }
        return (
          <div class="custom-tree-node">
            <span class={nodeClass} title={node.label}>
              {node.label}
            </span>
          </div>
        )
      },
      setCurrentNode(key) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(key)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .custom-tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .treeStyle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
</style>
